<template>
	<view
		:style="'background: url(' + imgData.mineBg + ') no-repeat;background-size: contain;height:' + systemInfo.screenHeight + 'px;'">
		<u-navbar title=" " :autoBack="true" bgColor="transparent" :fixed="false">
			<view class="u-nav-slot" slot="left">
				<!-- <u-tabs :list="list1" :lineColor="$u.color.color"></u-tabs> -->
			</view>
		</u-navbar>
		<view class="p-30" style="padding-bottom: 120rpx;">
			<view class="flex-row justify-between align-center"  @click="jumpPage('/pages/mine/info')">
				<view class="flex-row justify-between align-center">
					<view class="">
						<u-avatar :src="$userInfo.avatar" size="60"></u-avatar>
					</view>
					<view class="ml-30 flex-column justify-between">
						<template v-if="isLogin">
							<view class="">
								{{$userInfo.nickname}}
							</view>
							<view class="mt-10 flex-row justify-center align-center">
								<u-image :src="$userInfo.vip_img" width="120rpx" height="30rpx"
									v-if="$userInfo.vip_img"></u-image>
								<view class="small-size gray-color ml-10">
									可免费查看{{$userInfo.view}}次
								</view>
							</view>
						</template>
						<view @click.stop="jumpPage()" v-else>
							授权登录
						</view>
					</view>
				</view>
				<view class="">
					<u-icon name="arrow-right" color="#999999"></u-icon>
				</view>
			</view>

			<view class="mt-30" v-if="configData.program == 1">
				<image @click="jumpPage('/pages/settle/vip')" :src="imgData.staffImg" style="width:100%;height: 220rpx;border-radius: 10rpx;" mode="widthFix"></image>
				<image @click="jumpPage('/pages/mine/vip')" :src="imgData.vipImg" style="width:100%;height: 220rpx;border-radius: 10rpx;" mode="widthFix"></image>
				
				<!-- <u-image @click="jumpPage('/pages/settle/vip')" showLoading :src="imgData.staffImg" width="100%"
					height="200rpx" mode="widthFix" radius="10"></u-image>
				<u-image v-if="configData.program == 1" @click="jumpPage('/pages/mine/vip')" showLoading :src="imgData.vipImg" width="100%"
					height="200rpx" mode="widthFix" radius="10"></u-image> -->
			</view>
			<view class="card p-30">
				<view class="mb-30 fw-700">
					我的服务
				</view>
				<u-grid :border="false" col="4">
					<template v-if="configData.program == 1">
					<u-grid-item v-for="(listItem,listIndex) in list" :key="listIndex" @click="jumpPage(listItem.path)">
						<!-- <u-icon :customStyle="{paddingTop:20+'rpx'}" :name="listItem.name" :size="22"></u-icon> -->
						<image :src="`${baseUrl}/assets/web/mine/nav-${listIndex + 1}.png`"
							style="width: 60rpx;height: 60rpx;padding-top: 20rpx;" mode="widthFix"></image>
						<template v-if="listItem.title != '我的客服'">
							<view class="small-size mt-10 gray-color">{{listItem.title}}</view>
						</template>
						<template v-else>
							<button class="kefu" open-type="contact">联系客服</button>
						</template>
					</u-grid-item>
					</template>
					<template v-else>
						<u-grid-item v-if="listItem.status == 1" v-for="(listItem,listIndex) in list" :key="listIndex" @click="jumpPage(listItem.path)">
							<!-- <u-icon :customStyle="{paddingTop:20+'rpx'}" :name="listItem.name" :size="22"></u-icon> -->
							<image :src="`${baseUrl}/assets/web/mine/nav-${listIndex + 1}.png`"
								style="width: 60rpx;height: 60rpx;padding-top: 20rpx;" mode="widthFix"></image>
							<template v-if="listItem.title != '我的客服'">
								<view class="small-size mt-10 gray-color">{{listItem.title}}</view>
							</template>
							<template v-else>
								<button class="kefu" open-type="contact">联系客服</button>
							</template>
						</u-grid-item>
					</template>
					
					<u-grid-item @click="jumpPage('/pages/mine/staff/release')" v-if="$userInfo.is_staff == 1">

						<!-- <u-icon :customStyle="{paddingTop:20+'rpx'}" :name="listItem.name" :size="22"></u-icon> -->
						<image :src="`${baseUrl}/assets/web/mine/nav-1.png`"
							style="width: 60rpx;height: 60rpx;padding-top: 20rpx;" mode="widthFix"></image>
						<view class="small-size mt-10 gray-color">技师套餐</view>

					</u-grid-item>
				</u-grid>
			</view>
		</view>
		<page-tabbar :value="4" />
		<u-toast ref="uToast"></u-toast>
		<login ref="login" />
	</view>
</template>

<script>
	import {
		hotList,
		wxLogin
	} from '@/common/api.js'
	import {
		mapState
	} from "vuex";
	import commonMixin from '@/mixins/common.js';
	export default {
		mixins: [commonMixin],
		data() {
			return {
				list: [{
						name: 'photo',
						title: '我的套餐',
						path: '/pages/mine/release',
						status:1,
					},
					{
						name: 'lock',
						title: '元宝钱包',
						path: '/pages/mine/recharge',
						status:1,
					},
					{
						name: 'star',
						title: '推广赚钱',
						path: '/pages/share/index',
						status:1,
					},
					{
						name: 'hourglass',
						title: '我的发布',
						path: '/pages/mine/post',
						status:0,
					},
					{
						name: 'home',
						title: '我的花名册',
						path: '/pages/mine/staff',
						status:0,
					},
					{
						name: 'star',
						title: '我的客服',
						// path: '/pages/share/index'
					},
					{
						name: 'star',
						title: '我的礼物',
						path: '/pages/mine/gift',
						status:0,
					},
					{
						name: 'star',
						title: '设置',
						path: '/pages/mine/setting',
						status:1,
					}
				],
			}
		},
		computed: {
			...mapState([""]),
		},
		onShow() {
			this.$store.dispatch('getUserInfo');
		},
		onLoad() {
			console.log(this.systemInfo);
		},
		methods: {
			url1(url) {
				console.log('eee', url);
				uni.navigateTo({
					url
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.kefu {
		border: none;
		font-size: 24rpx;
		border-radius: 50%;
		background-color: #fff;
		opacity: 1;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		z-index: 99;
		color: #999999;
		margin-top: 10rpx;
		overflow: auto;
		line-height: normal;
	}

	.kefu:after {
		width: auto;
		height: auto;
	}
</style>